<!-- 个人订单中心 -->
<template>
  <Tabs v-model="activeName" @tabClick="clickTab">
    <TabsPanel v-for="(item, i) in orderStatus" :key="i" :name="item.name" :label="item.label"></TabsPanel>
  </Tabs>

  <!-- 订单列表 -->
  <div class="order-list">
    <div v-if="loading" class="loading"></div>
    <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
    <OrderItem @on-cancel-order="handlerCancel(order)" @on-delete-order="handlerDelete(order)"
      @on-confirm-order="handlerConfirm(order)" @on-order-logistics="onLogisticsOrder(order)"
      v-for="(order, i) in orderList" :key="i" :order="order" />

    <!-- 分页器 -->
    <pagination v-if="requestParams.total != 0" :CurrentPage="requestParams.page" :pageSize="requestParams.pageSize"
      :Total="requestParams.total" @current-change="requestParams.page = $event" />
  </div>

  <!-- 取消订单对话框 -->
  <Teleport to="#model">
    <OrderCancel ref="orderCancel" />
  </Teleport>

  <!-- 物流组件 -->
  <Teleport to="#model">
    <OrderLogistics ref="logisticsOrderCom" />
  </Teleport>
</template>

<script>
import { ref, reactive, watch } from "vue";
import { confirmOrder, delteOrder, findOrderList } from "@/api/order";
import { orderStatus } from "@/api/constants";
import OrderItem from "./components/order-item.vue";
import OrderCancel from "./components/order-cancel.vue";
import Pagination from "@/components/library/pagination.vue";
import Confirm from "@/components/library/Confirm";
import Message from "@/components/library/Message";
import OrderLogistics from "./components/order-logistics.vue";

export default {
  name: "MemberOrder",
  components: {
    OrderItem,
    OrderCancel,
    Pagination,
    OrderLogistics
  },
  setup() {
    // 活跃Tab栏标识
    const activeName = ref("all");

    // 查询订单参数
    const requestParams = reactive({
      page: 1, //当前页码
      pageSize: 5,
      orderState: 0,
      total: 0,
    });
    // 点击tab事件
    const clickTab = (item) => {
      requestParams.orderState = item.index;
      requestParams.page = 1;
    };

    // 获取新得订单列表信息
    const orderList = ref([]);
    const loading = ref(true);
    const findOrderListFn = () => {
      findOrderList(requestParams).then((data) => {
        requestParams.total = data.result.counts;
        orderList.value = data.result.items;
        loading.value = false;
      });
    }
    /* 当查询参数发生变化的时候重新发起请求 */
    watch(
      requestParams,
      () => {
        loading.value = true;
        findOrderListFn()
      },
      { immediate: true }
    );


    // 删除订单处理操作
    const handlerDelete = (order) => {
      Confirm({ text: '您确认删除订单？' }).then(() => {
        delteOrder([order.id]).then(data => {
          Message({ type: 'success', text: '删除订单成功' })
          //重新和获取订单信息， 更新页面
          findOrderListFn()
        })
      })
    }

    return {
      activeName,
      clickTab,
      orderStatus,
      orderList,
      loading,
      requestParams,
      ...useCancelOrder(),
      ...useConfirmOrder(),
      handlerDelete,
      ...useLogisticsOrder()
    };
  },
};

// 取消订单逻辑
export const useCancelOrder = () => {
  const orderCancel = ref(null);
  const handlerCancel = (order) => {
    // 调用其组件的方法, 传入当前订单信息
    orderCancel.value.open(order);
  };

  return {
    orderCancel,
    handlerCancel,
  };
};

// 确认收货
export const useConfirmOrder = () => {
  const handlerConfirm = (order) => {
    Confirm({ text: '您确认收到货吗？确认后货款将会打给卖家。' }).then(() => {
      confirmOrder(order.id).then(() => {
        Message({ type: 'success', text: '确认收货成功' })
        //收货后应该立即修改状态辅助页面刷新
        order.orderState = 4
      })
    }).catch(() => {
      Message({ text: '以取消确认收货' })
    })
  }

  return {
    handlerConfirm
  }
}

// 封装逻辑-查看物流
const useLogisticsOrder = () => {
  const logisticsOrderCom = ref(null)
  const onLogisticsOrder = (item) => {
    logisticsOrderCom.value.open(item)
  }
  return {
    onLogisticsOrder,
    logisticsOrderCom
  }
}
</script>

<style lang="less" scoped>
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
}

.loading {
  height: 100%;
  width: 100%;
  min-height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9) url(../../../assets/images/loading.gif) no-repeat center;
}

.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>